<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" xmlns:th="http://www.thymeleaf.org"/>
        <title>用户展示</title>
        <link th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}" rel="stylesheet"/>
    </head>
    <body>
        <div class="table-responsive">
            <table class="table table-striped table-hover table-condensed">
                <caption>基本的表格布局</caption>
                <thead>
                    <tr>
                        <th><input type="checkbox" id="checkAll"></th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>生日</th>
                        <th>住址</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="user: ${list}">
                        <td><input type="checkbox" name="ids" th:value="${user.id}"></td>
                        <td th:text="${user.name}"></td>
                        <td th:text="${user.gender==1?'男':'女'}"></td>
                        <td th:text="${#dates.format(user.birthday,'yyyy年MM月dd日')}"></td>
                        <td th:text="${user.address}"></td>
                    </tr>
                </tbody>
            </table>
            <ul class="pagination" style="text-align: center">
                <input type="hidden" id="current" th:value="${current}"/>
                <li class="page-item" aria-label="prev" th:if="${current > 1}">
                    <a class="page-link" href="#">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
                <li class="page-item" aria-label="next">
                    <a class="page-link" href="#">
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            </ul>
        </div>
        <script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}" type="text/javascript"></script>
        <script th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.min.js}" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                //全选功能
                $('#checkAll').on('click', function()
                {
                   $('[name=ids]').prop('checked', this.checked);
                });
                $('[name=ids]').on('click', function()
                {
                    $('#checkAll').prop('checked', ($('[name=ids]:checked').length === $('[name=ids]').length));
                });
                //分页功能
                $('.pagination>li').on('click', function ()
                {
                    /*<![CDATA[*/
                    let ctx = /*[[@{/}]]*/ '';
                    /*]]>*/
                    let current = $('#current').val();
                    if($(this).attr('aria-label') === 'prev')
                        current--;
                    else
                        current++;
                    window.location.href = ctx+'/user/query?current='+current;
                });
            });
        </script>
    </body>
</html>